<template>
  <!-- 批量设置海关编码组件 -->
  <el-dialog width="700px" v-el-drag-dialog title="批量设置海关编码" :visible.sync="batchSetGoodsCustomsGoodsCodeVisible">
    <div v-loading="importLoading" :element-loading-text="loadingText">
      <el-form ref="importForm" :model="importEntity" label-position="right" label-width="100px"
        style='width: 500px; margin-left:50px;'>
        <el-form-item label="导入文件" prop="fileUrl">
          <div v-if="importEntity.fileName">{{importEntity.fileName}}</div>
          <el-upload class="upload-demo" ref="importCustomsCode" name="files" accept=".xlsx, .xls"
            action="/api/common/uploadFiles" :multiple="false" :show-file-list="false" :data="token"
            :before-upload="beforeUploadFile" :on-success="handleUploadSuccess" :on-error="handleUploadError">
            <el-button size="small" type="primary">选取文件</el-button>
          </el-upload>
          <span>
            请先<el-button @click="downloadGoodsTemplate" type="text">点击导出数据模板</el-button>，填入海关编码后再选取文件上传。
          </span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSave">确定</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import {
    saveImportGoodsForBatchSetCustomsGoodsCode
  } from '@/api/goods/goods'
  import {
    downloadFile
  } from '@/api/common/common'
  import {
    getToken
  } from '@/utils/auth'
  import elDragDialog from '@/directive/el-dragDialog'
  export default {
    props: {
      onSuccess: Function
    },
    directives: {
      elDragDialog
    },
    watch: {},
    data() {
      return {
        token: {},
        goodsQuery: {},
        importEntity: {
          enterpriseId: this.getEnterpriseId(),
          supplierId: this.getSupplierId(),
          fileName: '',
          fileUrl: ''
        },
        batchSetGoodsCustomsGoodsCodeVisible: false,
        importLoading: false,
        loadingText: '导入中...'
      }
    },
    created() {
      this.token = {
        accessToken: getToken()
      }
    },
    methods: {
      handleSave() {
        if (!this.importEntity.fileUrl) {
          this.msgError('请导入要修改的文件')
          return
        }
        this.importEntity.enterpriseId = this.getEnterpriseId()
        this.importEntity.supplierId = this.getSupplierId()
        this.importLoading = true
        this.loadingText = '导入中...'
        saveImportGoodsForBatchSetCustomsGoodsCode(this.importEntity).then(response => {
          this.importLoading = false
          if (response.isError) return
          this.batchSetGoodsCustomsGoodsCodeVisible = false
          this.msgSuccess(response.msg)
          this.onSuccess()
        })
      },
      downloadGoodsTemplate() {
        var fileName = '批量设置海关编码-商品列表.xlsx'
        var url = '/goods/projectGoods/exportGoodsForBatchSetCustomsGoodsCode'
        if (this.getSupplierId()) {
          fileName = '供应商-批量设置海关编码-商品列表.xlsx'
          url = '/goods/supplierGoods/exportGoodsForBatchSetCustomsGoodsCode'
        }
        downloadFile(url, this.goodsQuery, fileName)
      },
      beforeUploadFile(file) {
        const ext = file.name.substring(file.name.lastIndexOf('.') + 1)
        if (ext !== 'xlsx' && ext !== 'xls') {
          this.msgError('请上传xls或xlsx格式的Excel文件')
          return false
        }
        this.importLoading = true
        this.loadingText = '上传中...'
        return true
      },
      handleUploadSuccess(res, file) {
        this.importLoading = false
        if (res.code !== 101) {
          this.importEntity.fileName = ''
          this.msgError(res.msg)
          return
        }
        this.importEntity.fileName = file.name
        this.importEntity.fileUrl = res.data[0]
        this.msgSuccess('文件已上传')
      },
      handleUploadError(res, file) {
        this.importLoading = false
      },
      handleCancel() {
        this.importLoading = false
        this.batchSetGoodsCustomsGoodsCodeVisible = false
        this.importEntity.fileName = ''
        this.importEntity.fileUrl = ''
      },
      open(goodsQuery) {
        if (!goodsQuery) {
          this.msgError('需要传递参数')
          return
        }
        if (!goodsQuery.enterpriseId) {
          this.msgError('没有企业id，无法设置!')
          return
        }
        Object.assign(this.goodsQuery, goodsQuery)
        this.goodsQuery.crossBorderType = '2'
        this.goodsQuery.goodsSource = ''
        this.goodsQuery.goodsSourceList = '0,1,2'
        this.batchSetGoodsCustomsGoodsCodeVisible = true
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
